<template>
  <el-container>
    <el-header class="fancy-span" style="text-align: right; font-size: 12px">
      <span class="parent_top">
        <span class="center_top">乡村助农App后台数据管理</span>

      <span class="right_top">
        <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px;color: white"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>查看</el-dropdown-item>
          <el-dropdown-item>新增</el-dropdown-item>
          <el-dropdown-item>删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>admin</span>
      </span>

    </el-header>
    <el-container>
      <el-aside >
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @select="handleSelect"
            router
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-suitcase"></i>
              管理
            </template>
            <el-menu-item index="/product-management" ><i class="el-icon-document-checked"></i>商品管理</el-menu-item>
            <el-menu-item  index="/user-management"><i class="el-icon-user"></i>用户管理</el-menu-item>
            <el-menu-item  index="/order-management"><i class="el-icon-s-order"></i>订单管理</el-menu-item>
            <el-menu-item  index="/commodity-management"><i class="el-icon-user-solid"></i>商家商品审核</el-menu-item>
            <el-menu-item  index="/feedback-management"><i class="el-icon-bell"></i>反馈管理</el-menu-item>
            <el-menu-item  index="/agriculture-management"><i class="el-icon-chat-line-square"></i>农业资讯管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>

<!--        侧方页面-->
        <router-view  />

      </el-main>
    </el-container>


  </el-container>



</template>

<script>
export default {
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.fancy-span {
  display: inline-block;
  border-radius: 5px;
  background: linear-gradient(to bottom right, #3c8dbc, #2b669a);
  font-weight: bold;
}
.parent_top {
  display: flex;
  justify-content: space-between;
}

.center_top {
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  width: 90%;
}

.right_top {
  color: white;
  font-weight: bold;
  display: inline-block;
  text-align: right;
  width: 10%;
}

.el-header {
  width: 100%;
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 88%;
  min-height: 100vh;
}

.el-aside {
  line-height: 260px;
  color: #333;
}
</style>
